<template>
  <div class="main">
    <div class="module" ref="module">
      <!-- 搜索表单 -->
      <div v-loading="loading" class="slotModule searchFormSlot" ref="searchFormSlot" v-if="$slots.searchForm">
        <slot name="searchForm" />
      </div>
      <div class="slotModule btnTab" :class="!$slots.tab && !$slots.title ? 'felxRight' : ''" ref="btnTab"
        v-if="$slots.tab || $slots.btn || $slots.title">

        <div class="rightModule">
          <div class="title" v-if="$slots.title">
            <slot name="title" />
          </div>
          <!-- tab切换 -->
          <slot name="tab" />
        </div>

        <!-- 按钮集合 -->
        <slot name="btn" />
      </div>
      <!-- 表单 -->
      <div class="slotModule tableSlot" ref="tableSlot" v-if="$slots.table">
        <slot name="table" />
      </div>
    </div>
    <!-- 分页组件 -->
    <div class="pagination" ref="pagination" v-if="$slots.pagination">
      <slot name="pagination" />
    </div>
    <div class="dialogModule" v-if="$slots.dialogModule">
      <slot name="dialogModule" />
    </div>
  </div>
</template>

<script>
import elementResize from 'element-resize-detector'
import Breadcrumb from '@/components/Breadcrumb'
import Hamburger from '@/components/Hamburger'
import { mapGetters } from 'vuex'
export default {
  components: {},
  data() {
    return {
      erd: null,
      loading: false,
      timer: null,
    }
  },
  components: {
    Breadcrumb,
    Hamburger
  },
  computed: {
    ...mapGetters([
      'sidebar',
      'avatar'
    ])
  },
  created() {
  },
  mounted() {
    this.erd = elementResize();
    this.loading = true;
    this.timer = setInterval(() => {
      this.listenTosearchForm()
    }, 500);
    setTimeout(() => {
      clearInterval(this.timer)
    }, 5000)
    setTimeout(() => {
      this.loading = false
    }, 1000)
  },
  beforeDestroy() {
    clearInterval(this.timer)
  },
  methods: {
    listenTosearchForm() {
      if (this.$refs.searchFormSlot) {
        this.erd.listenTo(this.$refs.searchFormSlot, element => {
          // console.log(element.clientHeight)
          this.$nextTick(() => {
            this.getTableHeight();
          })
        });
      }
    },
    getTableHeight() {
      let paginationHeight = 40;
      let module_H = this.$refs.module?.clientHeight;
      let btnTab_H = this.$refs.btnTab?.clientHeight || 0;
      let pagination_H = this.$refs.pagination?.clientHeight || 0;
      let searchFormSlot_H = this.$refs.searchFormSlot?.clientHeight || 0;
      module_H = module_H ? module_H : 0;
      btnTab_H = btnTab_H ? btnTab_H : 0;
      searchFormSlot_H = searchFormSlot_H ? searchFormSlot_H + 10 : 0;
      //没有分页组件时table高度加上40px
      if (pagination_H) {
        paginationHeight = 0;
      } else {
        paginationHeight = 40;
      }
      this.$refs.tableSlot.style.height = `${module_H - btnTab_H - searchFormSlot_H + paginationHeight - 10}px`;
    },
    toggleSideBar() {
      this.$store.dispatch('app/toggleSideBar')
    },
  }
};
</script>

<style lang="scss" scoped>
.slotModule {
  padding: 15px;
  margin-bottom: 10px;
  border-radius: 6px;
  background-color: #fff;
  box-shadow: 0 6px 10px 0px rgba(0, 21, 41, 0.05);
}

.slotModule:last-child {
  margin-bottom: 0;
}

.main {
  width: 100%;
  height: 100%;
  box-sizing: border-box;
  overflow: auto;
  background: rgb(243, 243, 243);

  .module {
    padding: 10px;
    width: 100%;
    height: calc(100% - 60px);
  }

  .pagination {
    text-align: right;
    margin: 0 10px;
    padding: 0 10px;
    height: 50px;
    border-radius: 0 0 6px 6px;
    background: #ffffff;
    box-shadow: 0 6px 10px 0px rgba(0, 21, 41, 0.05);
  }
}

.tableSlot {
  border-radius: 6px 6px 0 0;
  overflow-y: auto;
  height: calc(100% - 110px);
  // height: 100%;
}

.btnTab {
  margin: 0;
  height: 50px;
  background-color: #ffffff00;
  padding: 0;
  padding-right: 10px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: #4381b526;
}

.felxRight {
  justify-content: flex-end;
}

.rightModule {
  display: flex;
  justify-content: flex-start;
  align-items: center;
}

.title {
  padding: 0 20px;
  font-weight: bold;
  color: #4382b5;
}

.searchFormSlot {
  min-height: 60px;
  max-height: 300px;
  overflow-y: auto;
  position: relative;

  .fixed {
    border-radius: 6px;
    padding: 15px;
    min-height: 60px;
    background-color: #ffffff;
    width: 100%;
    position: absolute;
    top: 0;
    left: 0;
    box-shadow: 0 6px 10px 0px rgba(0, 21, 41, 0.082);
    z-index: 99;
  }
}
</style>
